<template>
	<wd-popup
		v-model="show" 
		lock-scroll 
		:z-index="1000"
		position="bottom" 
		safe-area-inset-bottom
		custom-style="border-radius: 10px 10px 0 0;"
		@close="close" 
	>
		<view class="popup-main">
			<view class="popup-title"> 出库信息 </view>
			<wd-form ref="formRef" :model="formData">
				<wd-picker 
					:columns="userList"
					title="选择运输人员"
					label="运输人员"
					value-key="id"
					label-key="nickname"
					prop="receive_id"
					v-model="formData.receive_id"
					:rules="[{ required: true, message: '请选择运输人员' }]"
					v-if="transportType != '2'"
				/>
				<template v-else>
					<wd-datetime-picker
						title="选择自提时间"
						label="自提时间"
						prop="ziti_time"
						:default-value="defaultDate"
						v-model="formData.ziti_time"
						:rules="[{ required: true, message: '请选择自提时间' }]"
					/>
					<view class="images-b">
						<view class="i-t"> 自提照片 </view>
						<view class="images">
							<view class="img" v-for="img in imgs" :key="img">
								<image :src="img" mode="aspectFill" class="img"/>
							</view>
							<view class="add flex-center" @tap="upload">
								<wd-icon name="add" size="22px" color="#999"/>
							</view>
						</view>
					</view>
				</template>
			</wd-form>
			<wd-button size="small" @tap="confirm"> 出 库 </wd-button>
		</view>
	</wd-popup>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import { expressUserListApi, uploadApi } from '@/api'
	import { formatter } from '@/utils'
	const emit = defineEmits(['action'])
	const props = defineProps(['transportType'])
	const show = ref(false)
	const formRef = ref()
	const formData = ref({
		receive_id: '',
		ziti_time: '',
		ziti_imgs: ''
	})
	const defaultDate = ref(Date.now())
	const userList = ref([])
	const imgsId = ref([])
	const imgs = ref([]) // 此字段仅做展示
	const upload = () =>{
		uploadApi().then(res =>{
			const { data, status, message } = res
			if(status == '200') {
				imgs.value.push(data.url)
				imgsId.value.push(data.id)
				formData.value.ziti_imgs = imgsId.value.join()
			} else {
				uni.showToast({
					icon: 'none',
					title: message
				})
			}
		})
	}
	const confirm = () => {
		formRef.value.validate().then(({ valid }) => {
			if (valid) {
				const { ziti_imgs, ziti_time, receive_id } = formData.value
				if (props.transportType == '2') {
					emit('action', { ziti_imgs, ziti_time: formatter(ziti_time, true) })
				} else {
					emit('action', {receive_id})
				}
			}
		})
	}
	const open = () => {
		show.value = true
	}
	const close = () => {
		show.value = false
	}
	defineExpose({
		open,
		close
	})
	onMounted(() => {
		expressUserListApi().then(res => {
			console.log(res);
			userList.value = res
		})
	})
</script>

<style lang="scss" scoped>
	.popup-main {
		gap: 10px;
		display: flex;
		flex-direction: column;
		padding: 20rpx 24rpx;
		.popup-title {
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
		}
		.images-b {
			margin: 10px 15px;
			.i-t {
				margin-bottom: 20rpx;
			}
		}
		.images {
			gap: 20rpx;
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			padding: 20rpx;
			border-radius: 10px;
			border: 1px solid #eee;
			.img, .add {
				width: 88rpx;
				height: 88rpx;
				border-radius: 10rpx;
			}
			.add {
				display: flex;
				background-color: #f8f8f8;
			}
		}
	}
</style>